<template>
  <div class="task_nameplate_module">
    <div class="nameplate-container">
      <div
        ref="template"
        :class="['template', MeterType === 'CL-S' ? 'template_01' : 'template_02']"
      >
        <div class="nameplate-header">
          <div class="image-left">
            <img
              v-if="headerMessage.许可证LOGO"
              :src="require(`@/assets/template/${headerMessage.许可证LOGO}.png`)"
              width="60"
            />
            <span>{{ headerMessage.AAF2501 }}</span>
          </div>
          <h4>{{ nameplateName }}</h4>
          <div class="image-right">
            <img
              v-if="headerMessage.防爆LOGO"
              :src="require(`@/assets/template/${headerMessage.防爆LOGO}.png`)"
              width="60"
            />
            <span>{{ headerMessage.AAF2601 }}</span>
          </div>
        </div>
        <div ref="message" class="nameplate-message">
          <div class="column">
            <div v-for="(v, k) in FormatedTemplateList.pre" :key="k" class="row">
              <span class="title">{{ k }}:</span>
              <span class="value">{{ v }}</span>
            </div>
          </div>
          <div class="column">
            <div v-if="MeterType === 'CL-S'" class="qrcode_wrapper">
              <canvas ref="qrcode" class="qrcode" />
            </div>
            <div v-for="(v, k) in FormatedTemplateList.next" :key="k" class="row">
              <span class="title">{{ k }}:</span>
              <span class="value">{{ v }}</span>
            </div>
            <div class="row">
              <span class="title">制造日期:</span>
              <span class="value">{{ formatMonth(currentDate.getTime()) }}</span>
            </div>
            <div v-if="MeterType === 'CL-2M+'" class="qrcode_wrapper">
              <canvas ref="qrcode" class="qrcode" />
            </div>
          </div>
        </div>
        <div class="nameplate-footer">上海中核维思仪器仪表股份有限公司</div>
      </div>
    </div>
    <div class="operation-container">
      <div class="image-preview">
        <div class="title">模板导出</div>
        <el-select
          v-model="currentFilename"
          size="mini"
          placeholder="请选择历史导出模板"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="file in fileOptions"
            :key="file.label"
            :label="file.label"
            :value="file.value"
          />
        </el-select>
        <div class="preview-zone">
          <div v-if="currentFilename.length === 0" class="empty">
            <i class="el-icon-box" />
            <span>暂无文件可预览</span>
          </div>
          <div v-else>
            <img ref="screenshot" :src="currentImgDataUrl" />
          </div>
        </div>
        <div
          :class="[
            'button-container',
            isEmptyPropertyExisting || isAAG101ValueWrong ? 'is-disabled' : ''
          ]"
        >
          <i class="iconfont icon-picture" @click="storeNameplate">
            <span>保存</span>
          </i>
          <i class="iconfont icon-download" @click="downloadNameplate">
            <span>下载</span>
          </i>
          <i class="iconfont icon-ashbin" @click="deleteNameplate">
            <span>删除</span>
          </i>
          <i class="iconfont icon-integral" @click="storeToExcel">
            <span>缓存</span>
          </i>
          <i class="iconfont icon-invoice" @click="exportToExcel">
            <span>导出</span>
          </i>
        </div>
      </div>
      <div ref="list-container" class="operation-list">
        <div class="title">数据更新</div>
        <ul ref="list">
          <li>
            <span class="label">铭牌名称</span>
            <el-input v-model="nameplateName" size="mini" class="operate-container" />
            <span class="unit" />
          </li>
          <li v-for="tem in TemplateOperateList" :key="tem.key">
            <span class="label">{{ mapZhCN[tem.key] }}</span>
            <el-input
              v-model="tem.value"
              size="mini"
              :disabled="tem.key === 'AAG101'"
              class="operate-container"
            />
            <span class="unit">{{ tem.unit }}</span>
          </li>
          <li>
            <span class="label">制造日期</span>
            <el-date-picker
              v-model="currentDate"
              type="month"
              size="mini"
              class="operate-container"
              placeholder="选择月份"
            />
            <span class="unit" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { toCanvas } from 'qrcode'
import html2canvas from 'html2canvas'
// interface
import { AxiosResponse } from 'axios'
import { Dictionary } from '@/interface/Basic'
import { SelectOptionsType } from '@/interface/ElementUI'
import { Component, Prop, Ref, Watch } from 'vue-property-decorator'
// api
import { GetNameplateData } from '@/api/dashboard'
import { GetFileListById, UploadFileByID, GetFileData, DeleteFileByID } from '@/api/device'
// static
import { mapZhCN } from '../settings/nameplate'
// methods
import { getExtend, generateFileName, dataURLtoFile, json2xlsx } from '@/utils/file'
@Component
class TaskNameplate extends Vue {
  @Prop({ required: true }) meterNo!: string
  @Ref() list!: HTMLUListElement
  @Ref() qrcode!: HTMLCanvasElement
  @Ref() template!: HTMLElement
  mapZhCN = mapZhCN
  RawData: Dictionary<string>[] = []
  get MeterType() {
    const CL_2M = ['WA6', 'WA9', 'WAB']
    // const CL_S = ['WA1', 'WA8']
    return CL_2M.includes(this.meterNo.slice(0, 3)) ? 'CL-2M+' : 'CL-S'
  }
  mounted() {
    interface ResponseType {
      Message: string
      ReturnData: Dictionary<string>[]
    }
    GetNameplateData({ ManufacturingNO: this.meterNo }).then((res: AxiosResponse<ResponseType>) => {
      const { Message, ReturnData } = res.data
      this.$message(Message)
      this.RawData = ReturnData
      this.getFileListById()
      this.$nextTick(this.generateHeight)
    })
  }
  @Watch('RawData', { deep: true })
  raw_handler(newVal: Dictionary<string>[]) {
    const extraData = ['AAF2501', 'AAF2601', '许可证LOGO', '防爆LOGO']
    const tempResult: Dictionary<string>[] = []
    const headerResult: Dictionary<string> = {}
    newVal
      .filter(item => item.value !== 'NULL')
      .forEach(row => {
        if (extraData.includes(row.key)) {
          headerResult[row.key] = row.value
        } else {
          if (row.key === 'AAG501') {
            row.value = this.fillZeroToAAG501(row.value)
          }
          tempResult.push(row)
        }
      })
    this.headerMessage = headerResult
    this.TemplateOperateList = tempResult
    this.generateQrcode(tempResult)
  }
  headerMessage: Dictionary<string> = {}
  TemplateOperateList: Dictionary<string>[] = []
  fillZeroToAAG501(com_no: string) {
    if (com_no !== '' && !com_no) com_no = ''
    while (com_no.length < 14) {
      com_no = '0' + com_no
    }
    return com_no
  }
  get FormatedTemplateList(): { pre: Dictionary<string>; next: Dictionary<string> } {
    const mapV: Dictionary<string> = {}
    const mapK: Dictionary<string> = {}
    this.TemplateOperateList.forEach(item => {
      mapV[item.key] = item.value
      mapK[item.key] = item.unit
    })
    if (this.MeterType === 'CL-S') {
      return {
        pre: {
          规格型号: `${mapV.AAF601} ${mapV.AAF701} ${mapV.AAF801}`,
          '功率(<)': mapV.AAF3001 + mapK.AAF3001,
          电源: mapV['电源'],
          接管内径: mapV.AAG101 + mapK.AAG101,
          防护等级: mapV.AAF2801 + mapK.AAF2801,
          防爆等级: mapV.AAF2901 + mapK.AAF2901,
          流量范围: `${mapV.AAF3201} - ${mapV.AAF3101}${mapK.AAF3201}`,
          工作压力: `${mapV.AAF1501} - ${mapV.AAF1601}${mapK.AAF1501}`,
          出厂编号: mapV.AAF001
        },
        next: {
          准确度等级: mapV.AAF2701 + mapK.AAF2701,
          介质温度: `${mapV.AAF3601} - ${mapV.AAF3501}${mapK.AAF3601}`,
          环境温度: `${mapV.AAF3401} - ${mapV.AAF3301}${mapK.AAF3401}`
        }
      }
    } else {
      return {
        pre: {
          规格型号: `${mapV.AAF601} ${mapV.AAF701} ${mapV.AAF801}`,
          接管内径: mapV.AAG101 + mapK.AAG101,
          防护等级: mapV.AAF2801 + mapK.AAF2801,
          防爆等级: mapV.AAF2901 + mapK.AAF2901,
          分界流量: mapV['分界流量'] + mapK['分界流量'],
          流量范围: `${mapV.AAF3201} - ${mapV.AAF3101}${mapK.AAF3201}`,
          工作压力: `${mapV.AAF1501} - ${mapV.AAF1601}${mapK.AAF1501}`,
          通讯编号: mapV.AAG501,
          出厂编号: mapV.AAF001
        },
        next: {
          准确度等级: mapV.AAF2701 + mapK.AAF2701,
          介质温度: `${mapV.AAF3601} - ${mapV.AAF3501}${mapK.AAF3601}`,
          环境温度: `${mapV.AAF3401} - ${mapV.AAF3301}${mapK.AAF3401}`
        }
      }
    }
  }
  isAAG101ValueWrong: boolean = false
  get isEmptyPropertyExisting() {
    return this.TemplateOperateList.some(item => item.value.trimEnd() === '')
  }
  // file relative
  currentFilename: string = ''
  @Watch('currentFilename')
  async file_handler(newVal: string) {
    if (newVal === '') return
    const ext = getExtend(newVal)
    const file = this.fileList[newVal]
    if (!file) {
      const response: AxiosResponse<Blob, any> = await GetFileData({
        id: 'nameplate_' + this.meterNo,
        filename: newVal
      })
      this.previewFile(
        new File([response.data], newVal, {
          type: ['jpg'].includes(ext) ? 'image/jpeg' : ext
        }),
        ext
      )
    } else {
      this.previewFile(file, ext)
    }
  }
  async previewFile(file: File, ext: string) {
    this.$set(this.fileList, file.name, file)
    if (['jpg', 'png', 'jpeg'].includes(ext)) {
      this.previewJPG(file)
    }
  }
  async previewJPG(file: File) {
    // if (this.fileList[buffer.name] !== null) return
    const fr = new FileReader()
    fr.readAsDataURL(file)
    fr.onload = e => {
      const result = e.target?.result
      if (!result || result === undefined) return
      this.currentImgDataUrl = result.toString()
    }
  }
  currentImgDataUrl: string = ''
  fileList: Dictionary<null | File> = {}
  get fileOptions(): SelectOptionsType<string> {
    return Object.keys(this.fileList).map(filename => {
      return { label: filename, value: filename }
    })
  }
  getFileListById() {
    GetFileListById({ id: 'nameplate_' + this.meterNo }).then(
      (res: AxiosResponse<{ ReturnData: Dictionary<string>[] }>) => {
        const { ReturnData } = res.data
        ReturnData.forEach(item => {
          this.$set(this.fileList, item.Name, null)
        })
        this.currentFilename = ReturnData[0] ? ReturnData[0].Name : ''
      }
    )
  }
  storeNameplate() {
    if (this.isEmptyPropertyExisting) {
      this.$message('铭牌上存在空值，或接管内径值错误，请确认后再执行该操作')
      return
    }
    const dom = this.template
    const { width, height } = dom.getBoundingClientRect()
    const scale = 3
    html2canvas(dom, {
      width,
      height,
      scale,
      // 开启跨域配置
      useCORS: true,
      allowTaint: true
    }).then(async canvas => {
      const src = canvas.toDataURL('image/jpeg', 1.0)
      const filename = generateFileName('铭牌', 'jpg')
      // 发送文件到后端
      const image_file = dataURLtoFile(src, filename)
      const fd = new FormData()
      fd.append('id', 'nameplate_' + this.meterNo)
      fd.append('file', filename)
      fd.append('file', image_file)
      await UploadFileByID(fd)
      // 重新获取文件列表
      await this.getFileListById()
      // 导出此次保存文件
      const image = new Image()
      image.src = src
      const url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream') // 输出类型
      const a = document.createElement('a') // 随便创建一个元素
      a.download = filename // 设置下载的文件名，默认是'下载'
      a.href = url
      document.body.appendChild(a)
      a.click()
      a.remove() // 下载之后把创建的元素删除
    })
  }
  downloadNameplate() {
    if (this.isEmptyPropertyExisting) {
      this.$message('铭牌上存在空值，或接管内径值错误，请确认后再执行该操作')
      return
    }
    // 导出此次保存文件
    const image = new Image()
    const _this = this
    image.setAttribute('crossOrigin', 'anonymous')
    image.src = this.currentImgDataUrl
    image.onload = function () {
      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const context = canvas.getContext('2d')
      if (!context) return
      context.drawImage(image, 0, 0, image.width, image.height)
      const url = canvas.toDataURL('image/png')
      const a = document.createElement('a') // 随便创建一个元素
      a.download = _this.currentFilename // 设置下载的文件名，默认是'下载'
      a.href = url
      document.body.appendChild(a)
      a.click()
      a.remove() // 下载之后把创建的元素删除
    }
  }
  deleteNameplate() {
    if (!this.currentFilename) return
    DeleteFileByID({
      id: 'nameplate_' + this.meterNo,
      fileName: this.currentFilename
    }).then(() => {
      this.$message({
        message: '文件删除成功',
        type: 'success'
      })
      this.$delete(this.fileList, this.currentFilename)
      this.currentFilename =
        Object.keys(this.fileList).length === 0 ? '' : Object.keys(this.fileList)[0]
    })
  }
  storeToExcel() {
    if (this.isEmptyPropertyExisting) {
      this.$message('铭牌上存在空值，或接管内径值错误，请确认后再执行该操作')
      return
    }
    // 基于当前表生成一行基础数据
    let obj: Dictionary<string> = {}
    const { pre, next } = this.FormatedTemplateList
    obj = { ...pre, ...next }
    const key_arr = ['AAF001', 'AAF601', 'AAF701', 'AAF801', 'AAF2701', 'AAF3201', 'AAF3101']
    const res_obj: Dictionary<string> = {}
    this.TemplateOperateList.forEach(item => {
      if (key_arr.includes(item.key)) res_obj[item.key] = item.value
    })
    const qr_string = `
设备编号：${res_obj.AAF001}
设备名称：气体超声流量计
规格型号：${res_obj.AAF601} ${res_obj.AAF701} ${res_obj.AAF801} 
准确度等级：${res_obj.AAF2701}
流量范围：${res_obj.AAF3201} - ${res_obj.AAF3101}m³/h
生产厂家：上海中核维思仪器仪表股份有限公司`
    obj['二维码数据'] = qr_string
    // 处理 localstorage 存储
    const meter_key = this.meterNo.slice(0, 3)
    const storage = localStorage.getItem('pcls_nameplate_excel_data')
    const total_data: Dictionary<Dictionary<string>[]> = storage ? JSON.parse(storage) : {}
    if (!total_data[meter_key]) {
      total_data[meter_key] = [obj]
    } else {
      // 去重
      let isRepeat = false
      const filterData = total_data[meter_key].filter(
        (row: Dictionary<string>) => row['规格型号'] === obj['规格型号']
      )
      if (filterData.length === 0) isRepeat = false
      else {
        isRepeat = !filterData.some(item => {
          return Object.keys(item).every(proper => item[proper] === obj[proper])
        })
      }
      if (!isRepeat) {
        this.$message({
          type: 'warning',
          message: '数据重复，保存失败'
        })
        return
      } else total_data[meter_key] = total_data[meter_key].concat([obj])
    }
    localStorage.setItem('pcls_nameplate_excel_data', JSON.stringify(total_data))
    this.$message({
      type: 'success',
      message: `${meter_key} 成功添加一条记录`
    })
  }
  exportToExcel() {
    const res = localStorage.getItem('pcls_nameplate_excel_data')
    const meter_key = this.meterNo.slice(0, 3)
    if (!res || !JSON.parse(res)[meter_key]) {
      this.$message({
        type: 'warning',
        message: '未找到该出厂编号下的记录，请先保存'
      })
      return
    }
    json2xlsx(
      JSON.parse(res)[meter_key],
      'pcls_nameplate_excel_data_' + meter_key + '.xlsx',
      'sheet1'
    )
    this.$message({
      type: 'success',
      message: `${meter_key} 已导出为execl文件`
    })
  }
  // operation list relative
  nameplateName: string = ''
  currentDate = new Date()
  @Watch('TemplateOperateList', { deep: true, immediate: true })
  name_handler(newVal: Dictionary<string>[]) {
    const obj: Dictionary<string> = {}
    newVal.forEach(item => (obj[item.key] = item.value))
    const { AAF701, AAG101, AAF3101, AAF3201 } = obj
    // 接管内径必须在通径 ±10% 范围以内
    if (AAF701 && AAG101) {
      const mid = Number(AAF701.slice(2))
      const min = (mid * 10 - mid) / 10
      const max = (mid * 10 + mid) / 10
      const numAAG101 = Number(AAG101)
      if (numAAG101 < min || numAAG101 > max) {
        this.$message('接管内径数据超过通径±10%，请核查')
        this.isAAG101ValueWrong = true
      } else {
        this.$message({
          type: 'success',
          message: '接管内径数据校验通过'
        })
        this.isAAG101ValueWrong = false
      }
    }
    // 铭牌名称
    const meter_prefix = this.meterNo.slice(0, 3)
    if (
      ['WA6', 'WA9'].includes(meter_prefix) &&
      Number(AAF3101) &&
      Number(AAF3201) &&
      Number(AAF3101) / Number(AAF3201) >= 100
    ) {
      this.nameplateName = '气体超声流量计（宽量程）'
    } else this.nameplateName = '气体超声流量计'
  }
  formatMonth(time: string | number) {
    if (time === 'null' || time === undefined || time === '') {
      return '-'
    }
    const date = new Date(time)
    var y = date.getFullYear()
    let m: number | string = date.getMonth() + 1
    if (m < 10) {
      m = `0${m}`
    }
    return `${y} 年 ${m} 月`
  }
  generateHeight() {
    const list = this.list
    if (!list || !list.parentElement) return
    this.list.style.height = list.parentElement.clientHeight - 40 + 'px'
  }
  // qrcode relative
  generateQrcode(res: Dictionary<string>[]) {
    const res_obj: Dictionary<string> = {}
    res.forEach(item => {
      res_obj[item.key] = item.value
    })
    const _this = this
    const CL_S_color = {
      dark: '#3a3a3a',
      light: '#ffffff'
    }
    const CL_2M_color = {
      dark: '#ffffff',
      light: '#3a3a3a'
    }
    const qr_string = `
设备编号：${res_obj.AAF001}
设备名称：气体超声流量计
规格型号：${res_obj.AAF601} ${res_obj.AAF701} ${res_obj.AAF801} 
准确度等级：${res_obj.AAF2701}
流量范围：${res_obj.AAF3201} - ${res_obj.AAF3101}m³/h
生产厂家：上海中核维思仪器仪表股份有限公司`
    toCanvas(
      this.qrcode,
      qr_string,
      {
        width: 170,
        color: _this.MeterType === 'CL-S' ? CL_S_color : CL_2M_color,
        errorCorrectionLevel: 'L'
      },
      function (err) {
        if (err) console.error(err)
        console.log('success')
      }
    )
  }
}
export default TaskNameplate
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.task_nameplate_module {
  box-sizing: border-box;
  padding: 20px;
  width: 70%;
  height: 80%;
  border-radius: 10px;
  #flex(row, center, space-between);
  #color(background-color, --module-bg-color);
  .nameplate-container {
    flex: 1;
    position: relative;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 20px;
    height: 100%;
    border-radius: 10px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    background: -webkit-linear-gradient(top, transparent 29px, #cecece 30px),
      -webkit-linear-gradient(left, transparent 29px, #cecece 30px);
    background-size: 30px 30px;
    background-color: #f3f3f3;
    overflow: auto;
    .template {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      margin: auto;
      padding: 10px 20px;
      // border: solid 1px #f3f3f3;
      background-color: #ffffff;
      // box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
      .nameplate-header {
        box-sizing: border-box;
        padding: 0 50px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        h4 {
          margin: 0;
          font-size: 24px;
          font-family: '黑体';
          white-space: nowrap;
        }
        .image-left,
        .image-right {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 12px;
        }
      }
      .nameplate-message {
        flex: 1;
        position: relative;
        box-sizing: border-box;
        padding: 0 10px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 22px;
        font-weight: 500;
        color: #3a3a3a;
        .column {
          flex: 0.9;
          height: 100%;
          display: flex;
          #flex(column, flex-start, flex-start);
          .row {
            width: 100%;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            min-height: 28px;
            margin-bottom: 5px;
            .title {
              width: 50%;
              text-align: left;
              white-space: nowrap;
            }
            .value {
              flex: 1;
              font-size: 20px;
              text-align: left;
              white-space: nowrap;
            }
          }
          .qrcode_wrapper {
            box-sizing: border-box;
            position: relative;
            width: 151px;
            height: 151px;
            overflow: hidden;
            .qrcode {
              position: absolute;
              top: -10px;
              left: -10px;
            }
          }
        }
        .column:first-child {
          flex: 1.1;
          margin-right: 20px;
          .row {
            .title {
              width: 35%;
            }
          }
        }
      }
      .nameplate-footer {
        margin: 0;
        font-size: 24px;
        font-family: '黑体';
      }
    }
    .template_01 {
      width: 198mm;
      height: 132mm;
      .nameplate-header {
        width: 95%;
        h4 {
          margin-right: 20px;
        }
        .image-left {
          margin-right: 20px;
        }
      }
      .nameplate-message {
        .column {
          .row {
            margin-bottom: 10px;
          }
        }
      }
    }
    .template_02 {
      width: 195mm;
      height: 105mm;
      .nameplate-header {
        width: 95%;
      }
      .nameplate-message {
        .column {
          .row {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .operation-container {
    width: 350px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .image-preview,
    .operation-list {
      .title {
        width: 100%;
        font-size: 20px;
        font-weight: 900;
        text-align: left;
        box-sizing: border-box;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: solid 1px;
        #color(color, --primary-text-color);
        #color(border-bottom-color, --primary-border-color);
      }
    }
    .image-preview {
      box-sizing: border-box;
      padding: 0 10px;
      margin-bottom: 20px;
      display: flex;
      width: 100%;
      #flex(column, center, flex-start);
      .el-select {
        width: 100%;
        margin-bottom: 10px;
      }
      .preview-zone {
        width: 100%;
        height: 200px;
        margin-bottom: 10px;
        border: solid 1px #cccccc;
        overflow: auto;
        .empty {
          width: 100%;
          height: 200px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: #a7a7a7;
          i {
            font-size: 48px;
            color: #c5c5c5;
          }
          span {
            line-height: 28px;
          }
        }
        img {
          width: 100%;
        }
      }
      .button-container {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        i {
          box-sizing: border-box;
          padding: 5px 18px;
          font-size: 20px;
          border-radius: 5px;
          transition: all 0.5s ease;
          cursor: pointer;
          #flex(column, center, center);
          span {
            font-size: 12px;
          }
        }
        i:hover {
          transform: translateY(-5px);
          #shadow-color(0, 4px, 12px, 1px, --primary-shadow-color);
        }
        .icon-picture {
          #color(color, --primary-blue-color);
          #color(background-color, --gray-blue-color);
        }
        .icon-download,
        .icon-invoice {
          #color(color, --primary-green-color);
          #color(background-color, --gray-green-color);
        }
        .icon-ashbin {
          #color(color, --primary-red-color);
          #color(background-color, --gray-red-color);
        }
        .icon-integral {
          #color(color, --primary-yellow-color);
          #color(background-color, --gray-yellow-color);
        }
      }
      .is-disabled {
        .icon-picture,
        .icon-download,
        .icon-integral {
          cursor: not-allowed;
          #color(color, --primary-text-color);
          #color(background-color, --lighter-shadow-color);
        }
      }
    }
    .operation-list {
      flex: 1;
      width: 100%;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
        height: 0;
        transition: all 0.5s ease;
        overflow: auto;
        li {
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          span {
            display: block;
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            #color(color, --primary-text-color);
          }
          .operate-container {
            flex: 1;
          }
          .label {
            width: 100px;
          }
          .unit {
            width: 60px;
            margin-left: 10px;
          }
        }
      }
      ::-webkit-scrollbar {
        width: 0;
      }
    }
  }
}
</style>
